<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断鼠标进入容易的方向，js判断划入方向</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
	//必需。规定要使用的事件。这个 e 参数来自事件绑定函数。
	$(".box").on("mouseenter mouseleave",function(e) {
		var w = $(this).width();
		var h = $(this).height();
		// 计算鼠标指针位于当前元素“比例空间”中的坐标位置以元素中心为坐标原点，
		//以元素左边位置为X轴的-1，
        //以元素右边位置为X轴的1，
        //以元素顶部位置为Y轴的-1，
        //以元素底部位置为Y轴的1，
        //的直角坐标空间。
        //如果宽大于高 x坐标  就是减去h/2  以短边为基准建立坐标系
		var x=(e.pageX-this.offsetLeft-(w/2))*(w>h?(h/w):1);
		 $(".spamlest").text(x); 
		 //如果宽大于高 y坐标  就是减去w/2 
		var y=(e.pageY-this.offsetTop-(h/2))*(h>w?(w/h):1);
		 $(".spaml").text(this.offsetTop);
			  $(".spam").text(e.pageY);
			  $(".spamles").text(y); 
		//atan2(y,x)所表达的意思是坐标原点为起点，指向(x,y)的射线在坐标平面上与x轴正方向之间的角的角度。-PI 到 PI 之间的值，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度。
		//round与 x 最接近的整数。说明对于 0.5，该方法将进行上舍入。例如，3.5 将舍入为 4，而 -3.5 将舍入为 -3。
		// 计算鼠标指针位于当前元素“比例空间”中的方位（注：0，1，2，3 分别代表 上，右，下，左）
		var dirNum=Math.round(((
            //算出每个点逆时针和原点的度数  算出表达式的范围是（-180,180）==》（0,360）
            //除以90就是（0，4）+3==》（3,7）round函数这这些数字等分 就近原则，使结果集中在坐标中上（红色表示）求余数 的结果就是（黑色数字表示）刚好和aPos数组吻合
			(Math.atan2(y,x)*(180/Math.PI))
			+180)/90)+3)%4;
		var eventType = e.type;
		var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}];
		if(eventType == 'mouseenter'){
			$(this).find(".box2").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200);
		}else{
			//stop停止被选元素的所有加入队列的动画，但允许完成当前动画。
			$(this).find(".box2").stop(true,true).animate(aPos[dirNum],200);
		}
	});
});

</script>
<style>
body{margin:0px;padding:0px;}
p{
	margin: 10px;
}
.box{width: 200px;height: 200px;border:1px solid red;margin: 0px auto;background-color: yellow;position: relative; overflow: hidden;zoom:1;float: left;}
.box1{background-color: #331;margin: 10px 10px;text-align: center;line-height:180px;}
.box2{position: absolute;left: -200px;top: -200px;width: 200px;background-color: red;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<p>js中x的坐标为： <span class="spamlest"></span></p>
<p>js中y的坐标为： <span class="spamles"></span></p>
<p>元素y偏移量为： <span class="spaml"></span></p>
<p>鼠标y坐标为： <span class="spam"></span></p>
<hr>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<div class="box">
	<div class="box1">
		#box1
	</div>
	<div class="box2">
		#box2
	</div>
</div>
<img src="http://cnkifile.b0.upaiyun.com/lianli/dom.JPG" alt="我的demo">
</body>
</html>